<template>
    <!-- 老版本舍弃 -->
	<div class="message-box">
		<header>
			{{totalNum||'0'}} &nbsp;条评论
			<div class="close" @click="close">
				<Iconfont iconClass="cha1" />
			</div>
		</header>
		<div class="message-content">
			<div v-if='isNoComment' class="no-comment-box">
				<p class="no-comment"></p>
			</div>
			<ul class="message-box-ul" ref="commentUl" @click="clickMsgContent">
			</ul>
		</div>
		<footer>
			<p class="yk-cover" @click="ykCover" v-if="$store.state.isYk"></p>
			<textarea id="huikan_pinglun" class="input" type="text" @keyup.13="sendMsg" :placeholder="inputPlaceholder" v-model="inputValue" @focus="onFocus()" @blur="onBlur()"></textarea>
			<span id="huikan_pinglun_fasong" v-show="isSend" @click="sendMsg">发送</span>
		</footer>
	</div>
</template>

<script>
	export default {
		components: {

		},
		props: {
			videoInfo: Object,
			totalNum: String,
		},
		data() {
			return {
				inputValue: '',
				isSend: false, //发送按钮
				videoId: this.$route.params.id,
				page: 1, //页码
				totalNum: null, //留言总数
				messageArray: [], //留言数组
				busy: false, //打开滚动
				inputPlaceholder: '',
				scrollSwitch: true,
				isNoComment: false, //是否有评论
				currentUn: this.$store.state.userInfo.un, //当前用户un
				totalPage: '', //留言总页数
				timerId: null
			}
		},
		watch: {
			inputValue() {
				if(this.inputValue && this.videoInfo.videoInfo.isPl == '1') {
					this.isSend = true;
				} else {
					this.isSend = false;
				}
			},
			totalNum() { //监听数据父的数字变化更新列表
				//console.log(this.totalNum)
				this.page = 1;
				this.messageArray = [];
				this.getMessageData();
			}
		},
		created() {
			this.getMessageData();
			//console.log(this.videoInfo.videoInfo.plCk)
			//console.log(this.totalNum)
			//评论开关
			if(this.videoInfo.videoInfo.isPl == '0') { //禁止评论
				this.inputPlaceholder = '评论功能已关闭'
			} else if(this.videoInfo.videoInfo.isPl == '1') { //可以评论
				this.inputPlaceholder = '说点什么吧...'
			}
		},
		mounted() {
			let _this = this;
			_this.$refs.commentUl.onscroll = function() {
				let scrollTop = _this.$refs.commentUl.scrollTop;
				let windowHeight = _this.$refs.commentUl.clientHeight;
				let scrollHeight = _this.$refs.commentUl.scrollHeight;
				//console.log('scrollTop:'+scrollTop+'windowHeight:'+windowHeight+'scrollHeight:'+scrollHeight)
				if(scrollTop + windowHeight + 5 >= scrollHeight && _this.scrollSwitch == true) {
					_this.scrollSwitch = false;
					_this.page++;
					_this.$http.get("/h5live/getComment?vid=" + _this.videoId + "&page=" + _this.page)
						.then(
							res => {
								let msgHtml = ''
								if(res.data.code == "000000") {
									let dataMsg = res.data.data.items;
									let messageHtml = '';
									if(res.data.data.items.length) {
										dataMsg.forEach(function(ele, index) {
											if(ele.type == '6') { //回复
												let li = document.createElement('li');
												li.className = 'message-box-li';
												// let img = document.createElement('img');
												// img.className = 'message-img';
												// img.src = ele.avator && ele.avator != null && ele.avator + '?x-oss-process=image/resize,m_fixed,h_45,w_45' || imgTx;
												// li.appendChild(img)
												let div = document.createElement('div');
												div.className = 'message-info-box';
												let p1 = document.createElement('p');
												p1.className = 'message-info';
												let span1 = document.createElement('span');
												span1.className = 'message-official'
												span1.innerText = '官方';
												let span2 = document.createElement('span');
												span2.className = 'message-name'
												span2.innerText = ele.nick || ele.ac;
												let span3 = document.createElement('span');
												span3.className = 'message-addTime'
												span3.innerText = ele.addTime;
												p1.appendChild(span1);
												p1.appendChild(span2);
												p1.appendChild(span3);
												div.appendChild(p1);

												let p2 = document.createElement('p');
												p2.className = 'message-reply';
												let span4 = document.createElement('span');
												span4.className = 'message-reply-name'
												span4.innerText = '@' + JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.nickName || '-';
												let span5 = document.createElement('span');
												span5.innerText = JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).msg;
												p2.appendChild(span4);
												p2.appendChild(span5);
												div.appendChild(p2);

												let p3 = document.createElement('p');
												p3.className = 'message-replied';
												let span6 = document.createElement('span');
												span6.innerText = JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.nickName + ' : ';
												let span7 = document.createElement('span');
												span7.innerText = JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.message;
												p3.appendChild(span6);
												p3.appendChild(span7);
												div.appendChild(p3);
												li.appendChild(div)
												_this.$refs.commentUl.insertBefore(
													li,
													_this.$refs.commentUl.childNodes[_this.$refs.commentUl.childNodes.length + 1]
												);
											} else { //普通
												let li = document.createElement('li');
												li.className = 'message-box-li';
												// let img = document.createElement('img');
												// img.className = 'message-img';
												// img.src = ele.avator && ele.avator != null && ele.avator + '?x-oss-process=image/resize,m_fixed,h_45,w_45' || imgTx;
												// li.appendChild(img)
												let div = document.createElement('div');
												div.className = 'message-info-box';
												let p1 = document.createElement('p');
												p1.className = 'message-info';
												if(ele.ac.includes('zbzlpt') || ele.ac == _this.videoInfo.videoInfo.creator) { //助手消息 obs主播发言ele.ac == _this.videoInfo.videoInfo.creator
													let span = document.createElement('span');
													span.className = 'message-official';
													span.innerText = '官方';
													p1.appendChild(span)
												}
												let span1 = document.createElement('span');
												span1.className = 'message-name';
												span1.innerText = ele.ac == _this.videoInfo.videoInfo.creator ?'主播':ele.nick + '  ';
												p1.appendChild(span1);
												let span2 = document.createElement('span');
												span2.className = 'message-addTime';
												span2.innerText = '  ' + ele.addTime
												p1.appendChild(span2);
												div.appendChild(p1);
												let p2 = document.createElement('p');
												p2.className = 'message-reply';
												let span3 = document.createElement('span');
												span3.innerText = fun.searchIphoneNum(ele.content) ;
												p2.appendChild(span3);
												div.appendChild(p2);
												li.appendChild(div);
												if(ele.ac == _this.currentUn) {
                          li.className = 'message-box-li highlight-me';
													let spanMy = document.createElement("span");
													spanMy.className = "my-tip";
													spanMy.innerText = '我';
													p1.insertBefore(spanMy, span2)
												}
												_this.$refs.commentUl.insertBefore(
													li,
													_this.$refs.commentUl.childNodes[_this.$refs.commentUl.childNodes.length + 1]
												);
											}

										})

									}
									_this.scrollSwitch = true;
									if(res.data.data.items.length < 10) {
										_this.scrollSwitch = false;
										fun.toastMessage('没有更多留言~')
										_this.totalPage = res.data.data.totalPage
									}
								}
							},
							err => {
								console.log(err);
							}
						);
				}
				if((_this.page == _this.totalPage + 1) && (scrollTop + windowHeight == scrollHeight)) {
					fun.toastMessage('没有更多留言~')
				}
			}
		},
		methods: {
			// ios下输入框被键盘遮挡
			onFocus() {
				fun.onFocus(this.timerId)
			},
			onBlur() {
				fun.onBlur(this.timerId)
			},
			loadMore: function() {
				this.busy = true;
				// 多次加载数据
				//this.tipText = "数据加载中..."
				setTimeout(() => {
					this.page++;
					this.getMessageData();
				}, 100);

			},
			getMessageData() {
				this.$http.get("/h5live/getComment?vid=" + this.videoId + "&page=" + this.page)
					.then(
						res => {
							let msgHtml = '';
							let _this = this;
							if(res.data.code == "000000") {
								let dataMsg = res.data.data.items;
								let messageHtml = '';
								if(dataMsg.length == 0) {
									_this.isNoComment = true; //展示沙发
								} else {
									_this.isNoComment = false; //隐藏沙发
									dataMsg.forEach(function(ele, index) {
										if(ele.type == '6') { //回复
											messageHtml = `<li  class="message-box-li">
												<div class="message-info-box">
													<p class="message-info">
														<span class="message-official">官方</span>
														<span class="message-name">${ele.nick||ele.ac}</span>
														<span class="message-addTime">${ele.addTime}</span>
													</p>
													<p class="message-reply">
														<span class="message-reply-name">@${JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.nickName||'-'}</span>
														<span >${JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).msg}</span>
													</p>
													<p class="message-replied">
							               <span>${JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.nickName||'-'}：</span>
													   <span>${JSON.parse(ele.content.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.message}</span>
													</p>
												</div>
											</li>`
										} else { //普通消息包括 普通和主播 消息
											let gfHtml = ''
											let myMsg = '';
                      let highlightMe ='';
											if(ele.ac == _this.currentUn) {
												myMsg = '<span class="my-tip">我</span>';
                        highlightMe ='highlight-me'
											}
											if(ele.ac.includes('zbzlpt') || ele.ac == _this.videoInfo.videoInfo.creator) { //官方 obs主播发言ele.ac == _this.videoInfo.videoInfo.creator
												gfHtml = `<span  class="message-official">官方</span>`
											}

											messageHtml = `<li  class="message-box-li ${highlightMe}">
																<div class="message-info-box">
																	<p class="message-info">
																	   ${gfHtml}
																		<span class="message-name">${ele.ac == _this.videoInfo.videoInfo.creator?'主播':ele.nick||ele.ac}</span>
																		${myMsg}
																		<span class="message-addTime">${ele.addTime}</span>
																	</p>
																	<p class="message-reply"><span >${fun.searchIphoneNum(ele.content)}</span></p>

																</div>
															</li>`
										}
										msgHtml += messageHtml;
									})
									_this.$refs.commentUl.innerHTML = msgHtml
								}

								_this.totalNum = res.data.data.totalNum;
								_this.$emit('formChildMsg', {
									type: 'upDataTotalNum',
									data: res.data.data.totalNum
								})
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			close() {
				this.$emit('formChildMsg', {
					type: 'footerMsaageBoxClose',
					data: 'ruan'
				})

			},
			     // 点击留言举报
			clickMsgContent(e){
					const {target,target:{tagName,parentNode:{className,previousElementSibling}}} = e;
					const firstNodeInnerText = previousElementSibling &&previousElementSibling.firstElementChild && previousElementSibling.firstElementChild.innerText
					if(tagName==='SPAN' && className ==='message-reply'&& firstNodeInnerText!=='官方'  ){
						this.$emit('formChildMsg', {
							type: 'reportMsgData',
							data: {
							  name:previousElementSibling.firstElementChild.innerText,
							  message:target.innerText
							}
						})
					}
			},
			sendMsgFun() {
				if(this.inputValue.length > 150) {
					fun.toastMessage("留言字数过多，请重新编辑", 2000)
					return
				}
				if(this.videoInfo.videoInfo.isPl == '0') {
					fun.toastMessage("评论功能已关闭", 2000)
					this.inputValue = "";
					return
				}
				//发送留言
				if(this.inputValue != "") {
					this.$http.post("/h5live/addComment?vid=" + this.videoId + "&content=" + this.inputValue + "&plat=" + fun.getPlatform()).then(
						res => {
							if(res.data.code == "000000") {
								if(this.videoInfo.videoInfo.plCk == '1') { //需要审核
									fun.toastMessage("已提交，等待审核", 2000)
								} else { //直接发 0或者 null
									//                                      this.page = 1;
									//									    this.messageArray= [];
									//										this.getMessageData();
								}
								this.inputValue = "";
							} else {
								fun.toastMessage(res.data.msg, 2000)
								this.inputValue = "";
							}
						},
						err => {
							console.log(err);
						}
					);
				};
			},
			sendMsg() {
				if(this.$store.state.isYk) {
					fun.ykDisposeFun();
					return
				}
				if(window.terminal.isZxyhApp) { //zxyh 未登录 调起登录
					window.bank.userInfoPlugin.isLogin((res) => {
						//console.log('zxyh res.isLogin',res.isLogin)
						if(res.isLogin) { //  true 已经登录
							this.sendMsgFun();
						} else { //  false  未登录
							fun.zxyhLogin(window.location.href) //调起登录
						}
					})
				} else {
					this.sendMsgFun();
				}
			},
			//头像处理
			getLookbackTX(txImg) {
				return txImg || imgTx
			},
			// 是否是JSON
			isJSON(str) {
				if(typeof str == 'string') {
					try {
						var obj = JSON.parse(str);
						if(typeof obj == 'object' && obj) {
							return true;
						} else {
							return false;
						}

					} catch(e) {
						return false;
					}

					
				}
			},
			ykCover() {
				if(this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
					fun.ykDisposeFun(jointUrl)
				}
			},
		},
		filters: {
			//过滤传过来的时间
			lookBack_time: function(type) {
				return type.slice(5, 10) + " " + type.slice(11, 16);
			},
		}

	};
</script>

<style scoped="scoped">
	.message-box {
		width: 100vw;
		height: 800px;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1001;
		border-radius: 20px 20px 0px 0px;
	}

	header {
		width: 100vw;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 22px;
		position: relative;
	}

	.close {
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconcha1 {
		padding: 0 30px;
		font-size: 18px;
		color: #c8c9cc;
	}

	.message-content {
		width: 100vw;
		height: 642px;
		overflow: hidden;
	}

	.message-box-ul {
		height: 100%;
		width: 100%;
		overflow-y: auto;
	}

	footer {
		width: 100vw;
		height: 88px;
		border-top: 1px #F3F3F3 solid;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.yk-cover {
		width: 100vw;
		height: 88px;
		background: transparent;
		/* background: saddlebrown;*/
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 15;
	}

	.input {
		width: 600px;
		height: 88px;
		max-width: 600px;
		border-radius: 10px;
		font-size: 28px;
		font-weight: 400;
		color: #3A3A3A;
		padding-left: 30px;
		word-wrap: break-word;
		word-break: normal;
		padding-top: 20px;
		line-height: 40px;
	}

	.input::placeholder {
		color: #9A9A9A;
	}

	footer span {
		flex: 1;
		height: 88px;
		line-height: 88px;
		text-align: center;
		font-size: 30px;
		font-weight: 400;
		color: #8E12BE;
	}

	.message-box-ul>>>.message-box-li {
		display: flex;
		flex-direction: row;
		align-items: top;
		padding: 10px 30px 0 30px;
	}
  .message-box-ul>>>.highlight-me {
		 background: rgba(227, 231, 255, 0.39);
	}
	.message-box-ul>>>.message-img {
		display: block;
		height: 45px;
		width: 45px;
		border-radius: 50%;
		margin-right: 20px;
	}

	.message-box-ul>>>.message-info {
		position: relative;
		margin-right: 15px;
		font-size: 26px;
		margin-bottom: 15px;
		color: #919191;
	}

	.message-box-ul>>>.message-info-box {
		width: 100%;
	}

	.message-box-ul>>>.message-info .message-official {
		display: inline-block;
		width: 60px;
		margin-right: 5px;
		background: linear-gradient(141deg, rgba(177, 98, 216, 0.9), rgba(165, 9, 243, 0.9));
		border-radius: 6px;
		text-align: center;
		color: white;
		font-size: 22px;
		line-height: normal;
		padding: 2px 0 3px;
	}

	.message-box-ul>>>.message-info .message-name {
		line-height: normal;
		color: #8E8E8E;
	}

	.message-box-ul>>>.message-reply {
		margin-bottom: 13px;
		font-size: 28px;
		color: #333333;
		word-break: break-all;
	}

	.message-box-ul>>>.message-reply-name {
		margin-right: 10px;
		color: #FFD800;
	}

	.message-box-ul>>>.message-replied {
		position: relative;
		width: 100%;
		padding: 4px 30px 4px 60px;
		background: #F7F7F7;
		font-size: 26px;
		line-height: 40px;
		color: #8A8B8C;
		border-radius: 10px;
	}

	.message-box-ul>>>.message-replied:before {
		position: absolute;
		top: 14px;
		bottom: 20px;
		left: 30px;
		width: 2px;
		background: #8A8B8C;
		content: "";
	}

	.no-comment-box {
		width: 100%;
		height: calc(100vh - 700px);
		display: flex;
		align-items: center;
	}

	.no-comment {
		width: 100%;
		height: 338px;
		background: url(../../../../assets/images/shafa.png) no-repeat top center;
		background-size: 369px 169px;
	}

	.message-box-ul>>>.my-tip {
		position: absolute;
		top: 0;
		bottom: 0;
		display: inline-block;
		background: linear-gradient(-30deg, #148EE3, #29D0EE);
		border-radius: 6px;
		line-height: normal;
		padding: 3px 8px;
		text-align: center;
		color: white;
		font-size: 20px;
		-webkit-transform-origin-x: 0;
		-webkit-transform: scale(0.90);
	}

	.message-box-ul>>>.my-tip+.message-addTime {
		margin-left: 45px;
	}

	.message-box-ul>>>.message-addTime {
		margin-left: 10px;
	}
</style>
